<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
   		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<script type="text/javascript" src="../js/echarts.js"></script>
	</head>
	<style type="text/css">
		.bnh-home-container{background: #f5f5f5}
		.bnh-home-headBox{height: 2.11rem;width: 7.5rem;background: #302d3e;position: relative;color: #fff;margin-bottom: 0.3rem}
		.bnh-head-img{height: 1.16rem;width: 1.16rem;border-radius: 50%;overflow: hidden;position: absolute;top: 0.45rem;left: 0.5rem;border:solid #fff 2px}
		.bnh-head-img > img{width: 100%;height: 100%;}
		.bnh-head-name{font-size: 0.4rem;position: absolute;left: 1.88rem;top: 0.4rem;font-weight: 600}
		.bnh-home-tel{position: absolute;left: 1.88rem;top: 1.08rem;font-size: 0.28rem}
		.bnh-authBox{height: 0.5rem;width: 1.4rem;background: #ffaf3c;border-radius: 15px;position: absolute;top: 0.78rem;right: 0.24rem;text-align: center;line-height: 0.5rem}
		.bnh-authBox > p{margin-top: 0.24rem}
		/*饼状图*/
		.bnh-pieBox{background: #fff;height: 4.62rem;position: relative;}
		.bnh-pieBox-head{height: 1rem;position: absolute;top: 0;left: 0;width: 7.5rem}
		.Pie{margin-left: 1.95rem;height: 230px;width: 235px;}
		.bnh-pieBox-title{font-size: 0.36rem;color: #000;font-weight: bold;position: absolute;top: 0.1rem;left: 0.28rem}
		.bnh-genduobox{position: absolute;bottom: 10px;right: 0.23rem;font-weight: bold}
		.bnh-genduobox > img{height: 0.28rem;width: auto;margin-left: 3px}
		.EchartClass{height: 1.8rem;width: 1.3rem;position: absolute;bottom: 15px;left: 0.28rem}
		.bnh-pieDian{height: 0.2rem;width: 0.2rem;border-radius:50%;margin-right: 2px;margin-bottom: -3px;}
		.bnh-pt{background: rgb(255,159,127)}
		.bnh-v1{background: rgb(254,219,91)}
		.bnh-v2{background: rgb(109,244,227)}
		.bnh-v3{background: rgb(60,178,239)}
		.class-item{font-size: 0.18rem}
		#line{margin-left: 0.5rem;}
	</style>
	<body>
	    <div class="bnh-home-container">
	    <!--认证Box框-->
        <div class="bnh-home-headBox">
            <div class="bnh-head-img">
                <img src="../img/head.png" alt="">
            </div>
            <p class="bnh-head-name">奋斗的青春</p>
            <p class="bnh-home-tel">187****1398</p>
            <div class="bnh-authBox">
                <p>未认证</p>
            </div>
        </div><!--认证Box框结束-->
        <!--用户统计-->
        <div class="bnh-pieBox">
        <div class="bnh-pieBox-head">
            <p class="bnh-pieBox-title">用户统计</p>
            <div class="bnh-genduobox flex flex-align-center">
                <p>详细</p>
                <img src="../img/right.png" alt="">
            </div>
        </div>
        <div id="userPie" class="Pie"></div>
        <div class="EchartClass">
            <div class="class-item flex flex-align-center">
                <div class="bnh-pieDian bnh-pt"></div>
                <p>普通用户</p>
            </div>
            <div class="class-item flex flex-align-center">
                <div class="bnh-pieDian bnh-v1"></div>
                <p>V1用户</p>
            </div>
            <div class="class-item flex flex-align-center">
                <div class="bnh-pieDian bnh-v2"></div>
                <p>V2用户</p>
            </div>
            <div class="class-item flex flex-align-center">
                <div class="bnh-pieDian bnh-v3"></div>
                <p>V3用户</p>
            </div>
        </div>
    </div> <!--用户统计结束-->
    <div style="height:0.3rem;background:#f5f5f5"></div>
            <!--用户统计-->
        <div class="bnh-pieBox">
        <div class="bnh-pieBox-head">
            <p class="bnh-pieBox-title">收益统计</p>
            <div class="bnh-genduobox flex flex-align-center">
                <p>详细</p>
                <img src="../img/right.png" alt="">
            </div>
        </div>
        <div id="ProfitPie" class="Pie"></div>
            <div class="EchartClass">
            <div class="class-item flex flex-align-center">
                <div class="bnh-pieDian bnh-v1"></div>
                <p>V1用户</p>
            </div>
            <div class="class-item flex flex-align-center">
                <div class="bnh-pieDian bnh-v2"></div>
                <p>V2用户</p>
            </div>
            <div class="class-item flex flex-align-center">
                <div class="bnh-pieDian bnh-v3"></div>
                <p>V3用户</p>
            </div>
        </div>
        <div class="EchartClass">
            <div class="class-item flex flex-align-center">
                <div class="bnh-pieDian"></div>
                <p></p>
            </div>
        </div>
    </div> <!--用户统计结束-->
    <div style="height:0.3rem;background:#f5f5f5"></div>
    <div class="bnh-pieBox">
        <div class="bnh-pieBox-head">
            <p class="bnh-pieBox-title">日增统计</p>
        </div>
        <div id='line' style="height: 230px;width: 330px;"></div>
    </div>
    </div>
    <div style="height:0.98rem"></div>
    <!--底部菜单-->
    <div class="footer">
        <div class="footBox flex">
              <div class="foot-item ft-active">
                  <img src="../img/home-active.png" alt="">
                  <p>首页</p>
              </div>
              <div class="foot-item">
                  <img src="../img/me.png" alt="">
                  <p>用户</p>
              </div>
              <div class="shareBox">
                  <img src="../img/home-share.png" >
              </div>
              <div class="foot-item " style="margin-left:1.3rem">
                  <img src="../img/pople.png" alt="">
                  <p>服务商</p>
              </div>
              <div class="foot-item">
                  <img src="../img/money.png" alt="">
                  <p>钱包</p>
              </div>
        </div>
    </div><!--底部菜单结束-->
    <script type="text/javascript" src="../js/rem.js"></script>
    <script type="text/javascript" src="../js/Pie.js"></script>
    <script type="text/javascript" src="../js/Line.js"></script>
	<script type="text/javascript">
        var userEchartsData=[{value:0, name:'50%',itemStyle:{color:'rgb(255,159,127)'}}, {value:0, name:'50%',itemStyle:{color:'rgb(254,219,91)'}}, {value:0, name:'30%',itemStyle:{color:'rgb(109,244,227)'}}, {value:0, name:'20%',itemStyle:{color:'rgb(60,178,239)'}}]
		setPie('用户统计',userEchartsData,'userPie');
        var MoneyEchartsData=[{value:0, name:'50%',itemStyle:{color:'rgb(254,219,91)'}}, {value:0, name:'50%',itemStyle:{color:'rgb(109,244,227)'}}, {value:0, name:'50%',itemStyle:{color:'rgb(60,178,239)'}}];
		setPie('收益统计',MoneyEchartsData,'ProfitPie');
	</script>
	</body>
</html>
